<!-- 验证码 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="手机验证码" />
    <view class="mobile">
      <view class="mobile__title"> 请输入{{ mobile }}收到的验证码： </view>
      <view class="mobile__input">
        <aster-code @finish="finish" />
      </view>
      <view class="mobile__subtitle">
        <text v-show="!showTime" @click="getSmsCode()">重新发送验证码</text>
        <text v-show="showTime">{{ time }} s后重新发送</text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterCode from '@/components/common/aster-code.vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import { sendCode, validateCode } from '@/services/api/user/login';
  import config from '@/utils/config';
  import { router } from '@/utils/router';
  import { Toast } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { onBeforeUnmount, ref } from 'vue';

  const mobile = ref();
  /** 显示验证码倒计时 */
  const showTime = ref<boolean>(false);
  /** 验证码倒计时 */
  const time = ref<number>(60);
  const timer = ref();

  onLoad((options: any) => {
    mobile.value = options.mobile;
    uni.getStorage({
      key: 'send_code_' + mobile.value,
      success: function (res) {
        let difDate = (new Date().getTime() - res.data.date) / 1000;
        if (res.data.time - Math.round(difDate) > 0) {
          time.value = res.data.time - Math.round(difDate);
          showTime.value = true;
          setIntervalFun();
        } else {
          showTime.value = true;
          time.value = 60;
          getSmsCode();
        }
      },
      fail: (res: any) => {
        getSmsCode();
      },
    });
  });

  const finish = (e: String) => {
    validateCode(mobile.value, e).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        router.push(config.route.replace_mobile);
      } else {
        Toast(data.message);
      }
    });
  };

  /** 获取验证码 */
  const getSmsCode = () => {
    sendCode(mobile.value).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        showTime.value = true;
        setIntervalFun();
      } else {
        Toast(data.message);
      }
    });
  };

  /** 添加定时器 */
  const setIntervalFun = () => {
    let interval = setInterval(function () {
      time.value--;
      uni.setStorage({
        key: 'send_code_' + mobile.value,
        data: {
          time: time.value,
          date: new Date().getTime(),
        },
        success: function () {},
      });
      if (time.value <= 0) {
        clearInterval(interval);
        showTime.value = false;
        time.value = 60;
      }
    }, 1000);
  };

  /** 页面销毁前清除定时器 */
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff !important;
    padding: 0 40rpx;
  }

  .mobile {
    padding: 120rpx 20rpx;

    &__title {
      display: flex;
      justify-content: flex-start;
      font-size: 32rpx;
      padding-bottom: 100rpx;
    }

    &__input {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    &__subtitle {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      font-size: 24rpx;
      padding: 20rpx;
    }
  }
</style>
